@use "sass:math";

$queue-w: 450%;
$ml: math.div($queue-w - 100%, -2);

.deck_question {
  overflow: hidden;
  position: relative;
  height: 100vh;
  &-mask {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    content: "";
    width: 6%;

    background: linear-gradient(90deg, var(--bg), transparent);

    &.mask-left {
      right: 0;
      left: auto;
      background: linear-gradient(-90deg, var(--bg), transparent);
    }
  }

  &-queue {
    width: $queue-w;
    margin-left: $ml;
    display: flex;

    transition: margin 0.3s;

    &.left {
      margin-left: $ml - 90%;
    }
    &.right {
      margin-left: $ml + 90%;
    }
    &.mid {
      transition: margin 0s;
    }

    &-item {
      width: 20%;
    }
  }
}
